<%@ page contentType="text/html; charset=UTF-8" language="java" isErrorPage="false" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>消息中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/logo.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/bootstrap.css">
</head>
<body>
    <!-- 头部导航栏 -->
    <%@ include file="../header.jsp"%>
    <!-- 消息导航栏-->
    <section class="bg-white shadow-sm">
            <div class="container">
                <div class="nav-scroller bg-white">
                    <nav class="nav nav-underline">
                        <li class="nav-link text-muted" href="#">消息中心</li>
                        <a class="nav-link active" href="/message/list">私信</a>
                        <a class="nav-link" href="/message/send">
                            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-mouse" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8V5a4 4 0 0 0-8 0v6a4 4 0 0 0 8 0zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
                            </svg>发送私信
                        </a>
                    </nav>
                </div>
        </div>
    </section>

    <!-- 私信列表 -->
    <section>
        <div class="container">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h6 class="border-bottom border-gray pb-2 mb-0">
                    私信列表
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chat ml-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
                    </svg>
                </h6>
                    <c:forEach items="${msglist.getList()}" var="item">
                        <div class="media text-muted pt-3">
                            <a href="#"><img src="${item.photo}" class="img-fluid rounded-circle shadow-sm" style="width: 45px;"></a>
                            <p class="media-body pl-2 pb-3 mb-0 small lh-125 border-bottom border-gray">
                                <c:choose>
                                    <c:when test="${item.owner == item.fromName}">
                                        <strong class="d-block text-gray-dark pb-1">您对 @${item.friendName} 说：</strong>
                                    </c:when>
                                    <c:otherwise>
                                        <strong class="d-block text-gray-dark pb-1">@${item.friendName} 对您说：</strong>
                                    </c:otherwise>
                                </c:choose>
                                ${item.content}

                                <small class="d-block pt-1">${item.createTimeStr}</small>
                                <small class="d-block pt-1 text-right" style="margin-top: -25px">
                                    <a href="/message/viewdetail?friendname=${item.friendName}" class="pl-2">查看</a>
                                </small>
                            </p>
                        </div>
                    </c:forEach>
            </div>
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item">
                        <a class="page-link" href="/message/list?pageIndex=1" aria-label="Previous">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>
                    <c:if test="${msglist.hasPreviousPage}">
                        <li class="page-item">
                            <a href="/message/list?pageIndex=${msglist.pageNum-1}" class="page-link" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <li class="page-item">
                        <c:forEach items="${msglist.navigatepageNums}" var="page_Nums">
                            <c:if test="${page_Nums==msglist.pageNum}">
                                <li class="page-item active"><a href="#" class="page-link">${page_Nums}</a></li>
                            </c:if>
                            <c:if test="${page_Nums != msglist.pageNum}">
                                <li class="page-item"><a href="/message/list?pageIndex=${page_Nums}" class="page-link"></a></li>
                            </c:if>
                        </c:forEach>
                    </li>
                        <c:if test="${msglist.hasNextPage}">
                            <li class="page-item">
                                <a href="/message/list?pageIndex=${msglist.pageNum+1}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </c:if>
                        <li class="page-item">
                            <a href="/message/list?pageIndex=${msglist.pages}" class="page-link">末页</a>
                        </li>
                </ul>
            </nav>
        </div>
    </section>


    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
    <script src="/js/message.js"></script>
</body>
</html>